<!--上方导航栏 -->
<template>
  <div>
    <yd-slider autoplay="3000">
      <yd-slider-item>
          <a href="http://www.ydcss.com">
              <img src="http://static.ydcss.com/uploads/ydui/1.jpg">
          </a>
      </yd-slider-item>
      <yd-slider-item>
          <a href="http://www.ydcss.com">
              <img src="http://static.ydcss.com/uploads/ydui/2.jpg">
          </a>
      </yd-slider-item>
      <yd-slider-item>
          <a href="http://www.ydcss.com">
              <img src="http://static.ydcss.com/uploads/ydui/3.jpg">
          </a>
      </yd-slider-item>
    </yd-slider>
    <div>
      <div class="tj-div">
        <span>推荐理由</span>
      </div>
      <div class="jj-div">
        <span>葫芦岛温泉，主要位置位于兴城，以兴城温泉中最大的一穴"天井"为中心，建有门厅、前厅、后厅等三套院。 古称汤泉，位于兴城东南的温泉街，距兴海浴场仅数里。早在辽、金时代，就享有盛誉。明代曾在温泉修建"致爽亭"，以备达官贵人淋浴和游乐观赏。
  兴城温泉的泉水，无色无臭，清澈透明，水温达70℃。泉水中含有钾、钠、钙、镁、硫等多种矿物质和微量放射性元素氡，具有很高的医疗价值，对风湿性关节炎、胃病、大骨节病、高血压、神经衰弱、慢性妇科病、外科手术恢复等十几种慢性病，均有很高的疗效。兴城温泉水储量相当丰富，共有4穴，12眼，日涌水量可达3000吨，现开采量2,000吨/日。</span>
      </div>
      <div class="user">
        <div>
          <img src="http://static.ydcss.com/uploads/ydui/1.jpg" class="tximg">
        </div>
        <div style="float: right;">
          <div class="dr-div">
            <span>达人收藏</span>
          </div>
          <div class="dr-div">
            <span>编者: 吴亦凡</span>
          </div>
        </div>
      </div>
    </div>
    <div class="line-div"></div>
    <div class="tj-div"><span>经典去处</span></div>
      <yd-infinitescroll :callback='load' ref='infinitescrollDemo'>
        <div v-for="item in list" :key="item.index" slot="list">
        <router-link :to="{path:'recommend_detail',query: {id:item.place_id}}">
          <div class="line-style">
            <div>
              <img :src="item.image" alt="" srcset="" class="tj-img">
            </div>
            <div style="height:2rem;">
              <div class="xbtdiv"><span>{{item.name}}</span></div>
              <div class="adddiv"><span>距您位置 1.7KM</span></div>
              <div class="xfdiv"><span>人均消费: 50元</span></div>
              <div class="adddiv">平均分: <span>{{item.score}}</span>&nbsp;&nbsp;评论数: <span>{{item.num}}</span></div>
            </div>
            <div class="cgjsdiv" v-html="item.content">
              <!-- <span>{{item.name_info}}</span> -->
            </div>
          </div>
        </router-link>
      </div>
      <!-- 数据全部加载完毕显示 -->
      <span slot='doneTip'>啦啦啦，啦啦啦，没有数据啦~~</span>
      <!-- 加载中提示，不指定，将显示默认加载中图标 -->
      <img slot='loadingTip' src='http://static.ydcss.com/uploads/ydui/loading/loading10.svg'/>
    </yd-infinitescroll>
    <div class="mapbut">
    <router-link :to="{path:'carouselmap',query: {id:this.$route.query.id}}">
    查看地图<hd-svg-icon name="hd-ditu" slot="left" size="20px" color="#000"></hd-svg-icon>
    </router-link>
    </div>
  </div>
</template>
<script>
export default {
  name: 'demo',
  data () {
    return {
      outdata: {},
      pageNo: 1,
      pageSize: 4,
      list: [],
      searchtext: ''
    }
  },
  mounted: function() {
    this.load();
  },
  methods: {
    load() {
      this.searchtext = this.$route.query.searchtext;
      if (this.searchtext !== undefined) {
        this.hdAjax({
          url: this.API.findPlaceNameList,
          method: 'POST',
          data: {
            type: 'J',
            name: this.searchtext,
            pageNo: this.pageNo,
            pageSize: this.pageSize
          },
          success: (resultData) => {
            const _list = resultData.data.results;
            this.list = [...this.list, ..._list];
            if (_list.length < this.pageSize) {
              /* 所有数据加载完毕 */
              this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
              return;
            }
            /* 单次请求数据完毕 */
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
            this.pageNo++;
          }
        });
      } else {
        this.hdAjax({
          url: this.API.findTwoByUseList,
          data: {
            type: 'J',
            id: this.$route.query.id,
            pageNo: this.pageNo,
            pageSize: this.pageSize
          },
          success: (resultData) => {
            const _list = resultData.data.results;
            this.list = [...this.list, ..._list];
            if (_list.length < this.pageSize) {
              /* 所有数据加载完毕 */
              this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
              return;
            }
            /* 单次请求数据完毕 */
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
            this.pageNo++;
          }
        });
      }
    }
  }
}
</script>
<style scoped>
.tj-div{
  font-size: 0.4rem;
  padding: 10px 20px 10px 20px;
}
.jj-div{
  font-size: 0.3rem;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom:10px;
  width:90%;
}
.tximg{
  height: 1rem;
  width: 1.5rem;
  float: right;
  margin-right: 10px;
  border-radius: 30px;
  margin-bottom: 10px;
}
.dr-div{
  font-size: 0.3rem;
  margin: 5px 10px 5px 10px;
  
}
.line-style{
  border-bottom: 1px solid #999999;
  margin-left: 4%;
  width: 92%;
}
.line-div{
  margin-left: 4%;
  width: 92%;
}
.tj-img{
  height: 2rem;
  width: 2.5rem;
  float: left;
}
.xbtdiv{
  margin-left: 44%;
  font-size: 0.4rem;
  margin-top:30px;
}
.adddiv{
  margin-left: 44%;
  font-size: 0.25rem;
  margin-top:10px;
  
}
.xfdiv{
  margin-left: 44%;
  font-size: 0.3rem;
  margin-top: 10px;
}
.cgjsdiv{
  font-size: 0.3rem;
  margin: 30px 20px 20px 10px;
}
.mapbut{
  border: 1px solid #000;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  position: fixed;
  width: 25%;
  height: 35px;
  line-height: 35px;
  left: 37.5%;
  bottom: 10px;
  z-index: 100;
}
.mapbut .icon-ucenter-outline:before {
  content: "\E616";
  color: #000;
}
.user{
  float: right;
  width: 92%;
  margin-bottom: 10px;
  border-bottom: 1px solid #999999;
  margin-right: 4%;
  
}
</style>
